<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>角斗士棋官网登录/注册页</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="shortcut icon" href="ico/blackLogo.ico" />
    <link rel="stylesheet" href="css/LoginOrRegister.css"/>
    <link rel="stylesheet" type="text/css" href="css/animate.min.css">

    <style>

    </style>
</head>
<body>
<!-- 遮盖层 -->
<div id="cover" class="hidden"></div>
<div id="lianxi" class="hidden">
    <div id="heng"><span>微信扫码关注公众号联系我们，右边关掉☞</span><span class="guanbi">✘</span></div>
    <img src="images/lianxiMe.jpg"/>
</div>
<!--动态的棋子 -->
<div id="redRoll" style="position: absolute;
			left: 20px;
			top: 20px;
			z-index: 20;
			transform: rotate(60deg);">
    <img src="images/red/r%20(13).png"/>
</div>
<div id="blueRoll" style="position: absolute;
			left: 45px;
			top: 500px;
			z-index: 20;
			transform: rotate(30deg);">
    <img src="images/blue/b%20(21).png"/>
</div>
<div id="greenRoll" style="position: absolute;
			left: 40px;
			top: 250px;
			z-index: 20;
			transform: rotate(50deg);">
    <img src="images/green/g%20(19).png"/>
</div>
<div id="yellowMove" style="position: absolute;
			right: 105px;
			bottom: 50px;
			z-index: 20;
			transform: rotate(60deg);">
    <img src="./images/yellow/y%20(14).png" />
</div>


<!--中间的内容-->
<div id="Box">
    <!-- 左边的图片 -->
    <div id="left">
        <img id="Lback" src="images/back03.png" />
    </div>

    <!-- 右边的框框 -->
    <div id="right">
        <h1 id="Title" class="fade">角斗士棋官网</h1>

        <div id="ChangeTitle" class="fade">
            <span id="ChangeSign">Sign In</span>
            <span style="color: skyblue;font-size: 20px;">/</span>
            <span id="ChangeRegi">Register</span>
        </div>

        <div id="errorMsg" style="color: red;position: absolute;left: 32%;top: 38%">

        </div>

        <!-- 登录 -->
        <div id="Signin" class="fade">
            <form id="LoginForm" method="post" action="/main">
                <div id="item">
                    <i style="font-size: 30px;color: red;vertical-align:middle;" class="fa fa-user" aria-hidden="true"></i>
                    <label for="userText" id="user">Username</label>
                    <input id="userText" type="text" name="username" value="" autocomplete="off" required/><br>
                    <div class="bottom-line"></div>
                </div>

                <div id="item">
                    <i style="font-size: 22px;color: red;vertical-align:middle;" class="fa fa-key" aria-hidden="true"></i>
                    <label for="pwdText" id="pwd">Password</label>
                    <input id="pwdText" type="password" name="password" required/><br>
                    <div class="bottom-line"></div>
                </div>

                <div>
                    <input id="button" type="button" onclick="playerLogin()" value="登录" />
                </div>
                <div id="forget">
                    <span>忘记密码?</span>
                </div>
            </form>
        </div>
        <!-- 注册 -->
        <div id="Register">
            <form id="RegisterForm" action="/main" method="post">
                <div id="item">
                    <i style="font-size: 17px;color: red;vertical-align:middle;" class="fa fa-graduation-cap" aria-hidden="true"></i>
                    <input id="Rrealname" type="text" placeholder="真实姓名" name="realname" autocomplete="off"/><br>
                </div>

                <div id="item">
                    <i style="font-size: 30px;color: red;vertical-align:middle;" class="fa fa-user" aria-hidden="true"></i>
                    <input id="Rusername" type="text" placeholder="Username" name="username" autocomplete="off"/><br>
                </div>

                <div id="item">
                    <i style="font-size: 22px;color: red;vertical-align:middle;" class="fa fa-key" aria-hidden="true"></i>
                    <input id="Rpassword" type="password" placeholder="Password" name="password" autocomplete="off"/><br>
                </div>

                <div>
                    <input id="button" type="button" value="注册" onclick="playerRegister()"/>
                </div>
            </form>

        </div>
    </div>
</div>
</body>

<script src="js/jquery-3.5.1.js"></script>
<script src="js/LoginOrRegister.js"></script>
<script>
    function playerLogin() {
        var username = document.getElementById('userText').value;
        var password = document.getElementById('pwdText').value;
        if ( username == '' || password == ' ') {
            document.getElementById('errorMsg').innerText = '请输入账号密码';
            return ;
        }
        $.ajax({
            type:'POST',
            url:'http://localhost:8081/player/playerLogin/'+username+'/'+password,
            data:{},
            success:function (response) {
                if ( response.data.message == 'error' ) {
                    document.getElementById('errorMsg').innerText = response.data.msg;
                }
                else {
                    document.getElementById('errorMsg').innerText = '';
                    //将用户名存入前端session
                    sessionStorage.setItem("player", username);
                    $('#LoginForm').submit();
                }
            },
            dataType:'json',
            error:function (response) {
                alert('出错了');
            }
        })
    }

    function playerRegister() {
        var realname = document.getElementById('Rrealname').value;
        var username = document.getElementById('Rusername').value;
        var password = document.getElementById('Rpassword').value;
        var player = {
            realname,username,password
        }
        console.log(player);

        $.ajax({
            type: 'POST',
            url:'http://localhost:8081/player/register',
            contentType:'application/json',
            data:JSON.stringify(player),
            success:function (response) {
                if ( response.data.message == 'error' ) {
                    document.getElementById('errorMsg').innerText = response.data.msg;
                }
                else {
                    document.getElementById('errorMsg').innerText = '';
                    //将用户名存入前端session
                    sessionStorage.setItem("player", username);
                    $('#RegisterForm').submit();
                }
            },
            dataType: 'json',
            error:function (response) {
                alert('出错了');
            }
        })
    }
</script>
</html>
